export default {
  inserted(el) {
    // console.log(el);
    //<div class="selector">...</div>

    const oSelectorInput = el.querySelector(".selector-input");
    // console.log(oSelectorInput);
    //<div class="selector-input">...</div>

    const oSelectorMenu = el.querySelector(".selector-menu");
    // console.log(oSelectorMenu);
    //<div class="selector-menu">...</div>

    const oInput = oSelectorInput.querySelector("input"),
      oPlaceholder = oSelectorInput.querySelector("label"),
      oIcon = oSelectorInput.querySelector("span");

    //输入框聚焦时
    oInput.addEventListener(
      "focus",
      function () {
        //隐藏输入框文本内容
        oPlaceholder.style.display = "none";

        //显示搜索图标
        oIcon.className = "iconfont icon-sousuo";

        setTimeout(() => {
          //显示下拉列表
          oSelectorMenu.style.display = "block";
        }, 200);
      },
      false
    );

    //输入框失去焦点时
    oInput.addEventListener(
      "blur",
      function () {
        //显示下箭头图标
        oIcon.className = "iconfont icon-xiajiantou";

        setTimeout(() => {
          //输入框没有内容时
          if (this.value.length === 0) {
            //显示输入框文本内容
            oPlaceholder.style.display = "block";

            //隐藏列表内容
            oSelectorMenu.style.display = "none";
          }
        }, 200);
      },
      false
    );
  },
};
